<template>
    <view style="padding: 40rpx;">
        <u-navbar :autoBack="true" :safeAreaInsetTop="true" :placeholder="true" bgColor="#FFF" :fixed="true">
            <view slot="left" style="display: flex;" @click="onBack">
                <u-icon name="arrow-left" size="22"></u-icon>

            </view>
            <view slot="center"
                style=" line-height: 27px; text-align: center; color: #000;width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin-left: 20rpx">
                {{ '试题搜索' }}
            </view>

        </u-navbar>
        <view>
            <u-search placeholder="请输入关键字" v-model="searchValue" :height="40" bgColor="#fff" borderColor="#f2f2f2"
                :animation="false" @custom="onSearch" @search="onSearch"></u-search>
            <view>
                <u-tabs :list="list1" @click="click" lineColor="#37B874"></u-tabs>
                <view v-for="(showQuestion, index) in screenData" :key="index" style="margin-top: 40rpx;">
                    <text
                        style="border: 1px solid #37B874;border-radius: 20px 20px 20px 0;padding: 5rpx 15rpx;background-color: #F3FBF7;display:inline-block;margin:2px 5px 40rpx 0">{{
                            onChangeDict(showQuestion.type,
                                mapDictCodesData.allQuestionType) }}</text>
                    <view style="border-radius: 10rpx;  padding-top: 10rpx;">
                        <view class="questionText"
                            :style="{ fontSize: fontSize + 'rpx', lineHeight: (fontSize + 12) + 'rpx', display: 'flex', flexDirection: 'row', overflow: 'auto' }">
                            <u-parse :content="showQuestion.itemText"></u-parse>
                        </view>
                    </view>
                    <RadioQuestion
                        v-if="['判断题', '单选题'].includes(showQuestion.itemTypeName) || ['0101', '0201'].includes(showQuestion.type)"
                        :showQuestion="showQuestion" :selectAnswer="showQuestion.type" :windowHeight="windowHeight"
                        :fontSize="fontSize" :showAnalysis="showQuestion.stuAnswer" flag="true"></RadioQuestion>
                    <CheckBoxQuerstion
                        v-else-if="(showQuestion.itemTypeName === '多选题' || ['0301'].includes(showQuestion.type) && showQuestion.selections)"
                        :showQuestion="showQuestion" :selectAnswer="showQuestion.type" :windowHeight="windowHeight"
                        :fontSize="fontSize" :showAnalysis="showQuestion.stuAnswer" flag="true"></CheckBoxQuerstion>
                    <view v-else-if="['简答题', '填空题', '计算题', '论述题', '绘图题'].includes(showQuestion.itemTypeName)"
                        :style="{ overflow: 'auto', marginTop: '30rpx' }" flag="true">
                        <view class="questionTextItem">
                            <u--textarea disabled v-model="selectAnswer" placeholder="请输入答案" autoHeight
                                border="bottom"></u--textarea>
                        </view>
                    </view>
                    <view>
                        <view style="display: flex;align-items: center;">
                            <text>试题解析</text>
                        </view>
                        <view style="font-size: 14px;margin-top: 20rpx;background: #F9F9F9;padding: 40rpx 20rpx;">
                            <rich-text :nodes="showQuestion.analysis ? showQuestion.analysis : '暂无'"></rich-text>
                        </view>
                    </view>
                </view>

            </view>
        </view>
    </view>
</template>

<script>
import CheckBoxQuerstion from '../pages/common/CheckBoxQuerstion.vue';
import RadioQuestion from '../pages/common/RadioQuestion.vue';
import { seachItem } from '../services/QuestionBankService';
import { mapDictCodes } from '../services/ServerService';
import { getArrObjectByProperty } from '../utils/PrjUtils';

export default {
    components: {
        RadioQuestion,
        CheckBoxQuerstion,
    },
    data() {

        return {

            marketId: '',
            searchValue: '',
            practiceDtat: [],
            list1: [
                // {
                //     name: '判断题',
                //     value: '0101',
                // },
                // {
                //     name: '单选题',
                //     value: '0201',
                // },
            ],
            screenData: [], // 筛选数据
            defaultData: [], // 全部数据
            mapDictCodesData: {}
        }
    },
    onLoad(option) {
        this.marketId = option.marketId
        this.onMapDictCodes()
        this.onSeachItem()
    },
    computed: {},
    methods: {
        onSearch() {
            this.onSeachItem()
        },
        onMapDictCodes() {
            mapDictCodes('allQuestionType').then(res => {
                this.mapDictCodesData = res
            })
        },
        onChangeDict(val, dict) {

            if (dict) {
                return getArrObjectByProperty(dict, 'value', val)?.label || ''
            }
        },
        onSeachItem() {
            if (this.searchValue) {
                seachItem({
                    marketId: this.marketId,
                    itemText: this.searchValue
                }).then(res => {
                    this.defaultData = res.items
                    this.screenData = res.items

                    let arr = this.mapDictCodesData.allQuestionType.filter(item => res.types.includes(item.value))
                    if (arr.length) {
                        arr.forEach(item => {
                            item.name = item.label
                        })
                        arr.unshift({
                            name: '全部',
                            value: ''
                        })
                        this.list1 = arr
                    }

                })
            }

        },
        click(item) {
            // this.value = item.value
            console.log('item', item, this.defaultData);
            this.screenData = item.value ? this.defaultData.filter(ite => ite.type === item.value) : this.defaultData
        },
        onBack() {

            uni.navigateBack({
                delta: 1
            })

        }
    },
    onShow() {

    },

}
</script>

<style lang="scss">
page {
    background: #ffffff !important;
}
</style>